// import { useState, useRef, useMemo, useCallback } from 'react'
// import MatrixRain from '@/components/MatrixRain'

// export default function Test() {
//   const [contentList, setContentList] = useState([])
//   const [fullText, setFullText] = useState('')
//   const timer = useRef(null)
//   const scrollRef = useRef(null)
//   // 打字机效果的方法
//   const typeWriterEffect = () => {
//     if (fullText.length > 0) {
//       // setContentList([...contentList, { content: '', show: true }])
//       contentList[contentList.length - 1].content += fullText[0]
//       setFullText(fullText.slice(1))
//       // 设置打字速度（例如每 100 毫秒显示一个字符）
//       timer = setTimeout(typeWriterEffect, 100)
//       if (fullText == '') {
//         //打字机效果结束后关闭加载效果，这里可以自由发挥
//         contentList[contentList.value.length - 1].show = false
//       }
//       //滚动到底部的距离
//       // scrollToBottom();
//     }
//   }
//   const mockData = useMemo(() => {
//     return Array.from({ length: 100000 }, (_, i) => {
//       const randomRepeat = Math.floor(Math.random() * 20) + 1 // 1~20个重复
//       return {
//         id: i,
//         content:
//           `Item ${i} - `.padEnd(randomRepeat * 10, '🌟') +
//           '欢迎学习虚拟列表 🚀',
//       }
//     })
//   }, [])
//   return (
//     <div>
//       {/* <MatrixRain /> */}
//       <div className="h-screen">
//         <VirtualList data={mockData} />
//       </div>
//     </div>
//   )
// }

// function VirtualList({ data, itemHeight = 50 }) {
//   const containerRef = useRef(null)
//   const [scrollTop, setScrollTop] = useState(0)
//   const containerHeight = 500
//   const buffer = 3

//   const [itemHeights, setItemHeights] = useState({})

//   const updateHeight = useCallback((index, height) => {
//     setItemHeights((prev) => {
//       if (prev[index] === height) return prev
//       return { ...prev, [index]: height }
//     })
//   }, [])

//   const [startIndex, endIndex, totalHeight] = useMemo(() => {
//     let total = 0
//     let start = 0
//     let end = data.length
//     let bufferTop = 0

//     // 找出可视区域起点
//     for (let i = 0; i < data.length; i++) {
//       const h = itemHeights[i] || itemHeight
//       if (total + h >= scrollTop) {
//         start = Math.max(0, i - buffer)
//         bufferTop = total
//         break
//       }
//       total += h
//     }

//     // 继续找出可视区域终点
//     let visibleHeight = 0
//     for (let i = start; i < data.length; i++) {
//       visibleHeight += itemHeights[i] || itemHeight
//       if (visibleHeight >= containerHeight) {
//         end = Math.min(data.length, i + buffer * 2)
//         break
//       }
//     }

//     const allHeight = data.reduce((acc, _, index) => {
//       return acc + (itemHeights[index] || itemHeight)
//     }, 0)

//     return [start, end, allHeight]
//   }, [scrollTop, itemHeights, data.length])

//   const offsetTop = useMemo(() => {
//     let offset = 0
//     for (let i = 0; i < startIndex; i++) {
//       offset += itemHeights[i] || itemHeight
//     }
//     return offset
//   }, [itemHeights, startIndex])

//   return (
//     <div
//       ref={containerRef}
//       className="overflow-y-auto bg-gray-50"
//       style={{
//         height: `${containerHeight}px`,
//         overflowY: 'auto',
//         color: '#999',
//       }}
//       onScroll={(e) => {
//         setScrollTop(e.currentTarget.scrollTop)
//       }}>
//       <div className="relative" style={{ height: `${totalHeight}px` }}>
//         <div
//           className="absolute w-full"
//           style={{
//             transform: `translateY(${offsetTop}px)`,
//           }}>
//           {data.slice(startIndex, endIndex).map((item, i) => (
//             <div
//               key={item.id}
//               ref={(ref) => {
//                 if (ref) {
//                   const h = ref.offsetHeight
//                   if (h && itemHeights[startIndex + i] !== h) {
//                     updateHeight(startIndex + i, h)
//                   }
//                 }
//               }}
//               className="border-b p-4 text-center bg-white hover:bg-blue-50 transition-colors">
//               {item.content}
//             </div>
//           ))}
//         </div>
//       </div>
//     </div>
//   )
// }
